<template>
	<div class="container">
		<el-dialog
			title="添加资源"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:show-close="false"
			destroy-on-close
			v-model="isShowDialog"
			width="720px"
		>
			<el-form :model="ruleForm" :rules="rules" ref="form" size="small" label-width="80px">
				<el-row :gutter="35">
					<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="文件名称" prop="fileName">
							<el-input v-model="ruleForm.fileName" placeholder="请输入文件名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="文件路径" prop="filePath">
							<el-input v-model="ruleForm.filePath" placeholder="请输入文件路径" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="产品文件尺寸(单位：kb)" prop="fileSize">
							<el-input type="number" v-model="ruleForm.fileSize" placeholder="请输入产品文件尺寸(单位：kb)" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="文件后缀" prop="fileSuffix">
							<el-input v-model="ruleForm.fileSuffix" placeholder="请输入文件后缀" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="文件目录" prop="folder">
							<el-input v-model="ruleForm.folder" placeholder="请输入文件目录" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="文件完整路径" prop="path">
							<el-input v-model="ruleForm.path" placeholder="请输入文件完整路径" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="资源关联来源标识(具体的表名，例如：product,user,class)" prop="source">
							<el-input
								v-model="ruleForm.source"
								placeholder="请输入资源关联来源标识(具体的表名，例如：product,user,class)"
								clearable
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="资源关联来源ID" prop="sourceID">
							<el-input type="number" v-model="ruleForm.sourceID" placeholder="请输入资源关联来源ID" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="资源类型（0图片 1视频 2word 3excel 4ppt 5pdf 6zip）" prop="type">
							<el-input
								type="number"
								v-model="ruleForm.type"
								placeholder="请输入资源类型（0图片 1视频 2word 3excel 4ppt 5pdf 6zip）"
								clearable
							></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="small">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="small">提 交</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { reactive, toRefs, watch, ref, defineComponent } from 'vue';
import { ElMessageBox } from 'element-plus';
import { add } from '/@/api/platform/files/index'
export default defineComponent({
	name: 'AddFiles',
	setup(props: any, context: any) {
		const state = reactive({
			isShowDialog: false,
			ruleForm: {
				fileName: '', //文件名称
				filePath: '', //文件路径
				fileSize: 0, //产品文件尺寸(单位：kb)
				fileSuffix: '', //文件后缀
				folder: '', //文件目录
				path: '', //文件完整路径
				source: '', //资源关联来源标识(具体的表名，例如：product,user,class)
				sourceID: 0, //资源关联来源ID
				type: 0, //资源类型（0图片 1视频 2word 3excel 4ppt 5pdf 6zip）
			},
			rules: {
				fileName: [{
					required: true,
					message: "请输入文件名称！",
					trigger: "blur"
				}], filePath: [{
					required: true,
					message: "请输入文件路径！",
					trigger: "blur"
				}], fileSuffix: [{
					required: true,
					message: "请输入文件后缀！",
					trigger: "blur"
				}], folder: [{
					required: true,
					message: "请输入文件目录！",
					trigger: "blur"
				}], path: [{
					required: true,
					message: "请输入文件完整路径！",
					trigger: "blur"
				}], source: [{
					required: true,
					message: "请输入资源关联来源标识(具体的表名，例如：product,user,class)！",
					trigger: "blur"
				}],
			},
		});
		const form = ref();
		const openDialog = (row?: object) => {

			state.isShowDialog = true;
		};
		const closeDialog = (row?: object) => {
			state.isShowDialog = false;
		};
		const onCancel = () => {
			closeDialog();
			initForm();
		};
		const initForm = () => {
			form.value.resetFields();
		};
		const onSubmit = () => {
			form.value.validate((valid: boolean) => {
				if (!valid) {
					return false;
				}
				add(state.ruleForm).then((res) => {
					ElMessageBox.alert(res.Message, '提示', {}).then(() => {
						context.emit("sendRefresh");
						closeDialog();
						initForm();
					}).catch(() => { });
				})
			})
		};
		return {
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			...toRefs(state),
			form
		};
	},
});
</script>